<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的小滴-小滴服务</title>
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/common.css">
    <style>
        .userInfo{
            text-align: center;
            background-image: url(./imgs/my-bg.png);
            background-size: cover;
            background-position: center;
            padding: 55px 0 50px 0;
        }
        .userInfo button{
            background-color: #1C6DC0;
            padding: 5px 10px;
            outline: none;
            border: 0;
            color: #fff;
        }
        .userInfo button:active{
            background-color: #dbe2ea;
            color: #333;
        }
        main{
            padding: 10px;
        }
        main a{
            text-decoration: none;
            color: #333;
            display: flex;
            background-color: #fff;
            align-items: center;
            padding: 15px 10px;
            border: 1px solid #E1E1E2;
            border-radius: 3px;
            margin-bottom: 10px;
        }
        main .arrow{
            margin-left: auto;
        }
    </style>
</head>
<body>
    <header>我的小滴</header>
    <div class="userInfo">
        <img class="mb10" src="./imgs/head.png" alt="">
        <p class="mb5">华杉科技</p>
        <button onclick="onExit()">退出登录</button>
    </div>
    <main>
        <a href="#">
            <img class="mr10" src="./imgs/gr_1.png" alt="">
            我的客户
            <img class="arrow" src="./imgs/arrow-right.png" alt="">
        </a>
        <a href="#">
            <img class="mr10" src="./imgs/gr_2.png" alt="">
            我的余额
            <img class="arrow" src="./imgs/arrow-right.png" alt="">
        </a>
        <a href="#">
            <img class="mr10" src="./imgs/gr_3.png" alt="">
            我的备忘录
            <img class="arrow" src="./imgs/arrow-right.png" alt="">
        </a>
        <a href="#">
            <img class="mr10" src="./imgs/gr_4.png" alt="">
            我的密钥
            <img class="arrow" src="./imgs/arrow-right.png" alt="">
        </a>
        <a href="#">
            <img class="mr10" src="./imgs/gr_1.png" alt="">
            我的客户
            <img class="arrow" src="./imgs/arrow-right.png" alt="">
        </a>
        <a href="#">
            <img class="mr10" src="./imgs/gr_1.png" alt="">
            我的客户
            <img class="arrow" src="./imgs/arrow-right.png" alt="">
        </a>
    </main>
     <!-- 底部导航 -->
      <footer>
        <a href="index.html">
            <img src="./imgs/home0.png" alt="">
            <p>小滴服务</p>
        </a>
        <a href="chuangye.html">
            <img src="./imgs/chuangye0.png" alt="">
            <p>创业项目</p>
        </a>
        <a href="fuwu.html">
            <img src="./imgs/fuwu0.png" alt="">
            <p>服务流程</p>
        </a>
        <a href="pingtai.html">
            <img src="./imgs/pingtai0.png" alt="">
            <p>平台风采</p>
        </a>
        <a href="my.html" class="active">
            <img src="./imgs/my1.png" alt="">
            <p>我的小滴</p>
        </a>
      </footer>
      <script>
        function onExit(){
            //省略了清除登录信息的逻辑
            location.href="./login.html";
        }
      </script>
</body>
</html>